<html>
<head>
    <meta charset="utf-8"/>
    <title>视频网站个人主页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
    <style>
        body {
            background-color: #F7F7F7;
            font-family: Arial, sans-serif;
        }
        .header {
            background: url('https://placehold.co/1132x200.png') no-repeat center center;
            background-size: cover;
            padding: 20px 0;
        }
        .search-bar {
            position: relative;
            max-width: 680px;
            margin: 0 auto;
            padding: 10px 0;
        }
        .search-bar input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 20px;
            font-size: 16px;
        }
        .search-bar button {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
        }
        .nav-icons {
            text-align: right;
            padding: 10px 0;
        }
        .nav-icons i {
            font-size: 24px;
            margin-left: 15px;
            cursor: pointer;
        }
        .profile-card {
            background-color: #FFFFFF;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .profile-card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        .profile-info {
            margin-top: 10px;
        }
        .profile-info h3 {
            margin: 0;
            color: #333333;
            font-size: 18px;
        }
        .profile-info p {
            margin: 0;
            color: #666666;
            font-size: 14px;
        }
        .content-section {
            padding: 20px;
        }
        .card {
            margin-bottom: 20px;
        }
        .card img {
            width: 100%;
            height: auto;
        }
        .card-body {
            background-color: #FFFFFF;
            padding: 15px;
            border-radius: 10px;
        }
        .card-title {
            margin: 0;
            color: #333333;
            font-size: 16px;
            font-weight: bold;
        }
        .card-text {
            color: #666666;
            font-size: 14px;
        }
        .card-footer {
            background-color: #FFFFFF;
            border-top: none;
            padding: 10px 15px;
            color: #999999;
            font-size: 12px;
            text-align: right;
        }
        .sidebar {
            background-color: #FFFFFF;
            padding: 20px;
            border-radius: 10px;
        }
        .sidebar h3 {
            margin: 0;
            color: #333333;
            font-size: 18px;
            border-bottom: 1px solid #DDDDDD;
            padding-bottom: 10px;
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar ul li {
            color: #666666;
            font-size: 14px;
            border-bottom: 1px solid #DDDDDD;
            padding: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="header">
            <div class="search-bar">
                <input type="text" placeholder="搜索视频、文章或用户"/>
                <button><i class="fas fa-search"></i></button>
            </div>
            <div class="nav-icons">
                <i class="fas fa-plus-square"></i>
                <i class="fas fa-bell"></i>
                <i class="fas fa-upload"></i>
                <i class="fas fa-user-circle"></i>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <div class="profile-card">
                    <div class="row">
                        <div class="col-md-2">
                            <img alt="Profile image placeholder" src="https://placehold.co/100x100.png" />
                        </div>
                        <div class="col-md-10 profile-info">
                            <h3>昵称：爱吃的猫猫</h3>
                            <p>ID: 123456789</p>
                        </div>
                    </div>
                </div>
                <div class="content-section">
                    <h3>我的主页</h3>
                    <p>我的作品：</p>
                    <div class="row">
                        <!-- Repeat for each item -->
                        <div class="col-md-4">
                            <div class="card">
                                <img alt="Placeholder image with astronaut and text '卡通插画的设计方法是什么？'" src="https://placehold.co/300x200.png" />
                                <div class="card-body">
                                    <h5 class="card-title">卡通插画的设计方法是什么？</h5>
                                    <p class="card-text">文 百度 it</p>
                                    <p class="card-text">卡内基梅隆大学(CMU)的交互设计(MHCI)</p>
                                    <p class="card-text">999W</p>
                                </div>
                                <div class="card-footer">上中国：2022-9-1</div>
                            </div>
                        </div>
                        <!-- Repeat for each item -->
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="sidebar">
                    <h3>个人资料</h3>
                    <ul>
                        <li>昵称：爱吃的猫猫</li>
                        <li>ID：123456789</li>
                        <li>性别：男</li>
                        <li>生日：1999-12-12</li>
                        <li>地区：山东省</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>